<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
		<link rel="stylesheet" href="css/codemirror.css" />
		<link rel="stylesheet" href="css/theme/dracula.css" />
		<link rel="stylesheet" href="css/show-hint.css" />
		<script type="text/javascript" src="js/codemirror.js"></script>
		<script type="text/javascript" src="js/sublime.js"></script>
		<script type="text/javascript" src="js/sql.js"></script>
		<script type="text/javascript" src="js/sql-hint.js"></script>
		<script type="text/javascript" src="js/show-hint.js"></script>
		<script type="text/javascript" src="js/formatting.js"></script>
		<script type="text/javascript" src="js/sql-formatter.min.js"></script>

	<style>
		.CodeMirror {
			border: 1px solid black;
		}
	</style>

	<body>
		<h2>SQL编辑器</h2>
		<form>
			<textarea id="code" name="code"></textarea>
		</form>
		<script>
			CodeMirror.keywords = "server software ";
			CodeMirror.tableKeywords = "server.ip server.cache software.conf software.version software.tags.count ";
			var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
				lineNumbers: true,
				extraKeys: {
					"Ctrl": "autocomplete"
				}, //输入s然后ctrl就可以弹出选择项  
				mode: {
					name: "text/x-mysql"
				},
				theme: "3024-day" //主题  
			});
			editor.on('change', function() {
				editor.showHint(); //满足自动触发自动联想功能
			});
		</script>
	</body>

</html>